<template>
  <div class="mod-yckj__order">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model="state.dataForm.id" placeholder="订单号" clearable style="width: 192px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.projectName" placeholder="项目名称" clearable style="width: 192px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.machineName" placeholder="机器名称" clearable style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.userName" placeholder="预约人/姓名/昵称" clearable style="width: 200px"></el-input>
      </el-form-item>
      <br />
      <el-form-item>
        <el-select v-model="state.statusList" style="width: 400px" multiple placeholder="状态" clearable @change="changeStatus">
          <el-option label="待取样" :value="0"></el-option>
          <el-option label="进行中" :value="1"></el-option>
          <el-option label="待确认" :value="2"></el-option>
          <el-option label="待支付" :value="3"></el-option>
          <el-option label="已完结" :value="4"></el-option>
          <el-option label="已取消" :value="9"></el-option>
          <el-option label="已拒绝" :value="10"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="state.dataForm.startTime" value-format="YYYY-MM-DD HH:mm:ss.000Z" type="datetime" placeholder="开始时间" style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="state.dataForm.endTime" value-format="YYYY-MM-DD HH:mm:ss.000Z" type="datetime" placeholder="结束时间" style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-button @click="state.getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('yckj:order:save')" type="primary" @click="addOrUpdateHandle()">预约 </el-button>
      </el-form-item>
      <!--      <el-form-item>
              <el-button v-if="state.hasPermission('yckj:order:delete')" type="danger" @click="state.deleteHandle()">删除
              </el-button>
            </el-form-item>-->
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" style="width: 100%">
      <!--      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
      <el-table-column prop="id" label="订单号" header-align="center" align="center" width="80"></el-table-column>
      <!--      <el-table-column prop="projectId" label="项目id" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="projectName" label="项目名称" header-align="center" align="center"></el-table-column>
      <!--      <el-table-column prop="machineId" label="机器id" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="machineName" label="机器名称" header-align="center" align="center"></el-table-column>
      <!--      <el-table-column prop="cateId" label="分类id" header-align="center" align="center"></el-table-column>-->
      <!--      <el-table-column prop="cateName" label="分类名称" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="contacts" label="联系方式" header-align="center" align="center">
        <template v-slot="scope"> {{ scope.row.contacts }}<br />{{ scope.row.phone }}</template>
      </el-table-column>
      <!--      <el-table-column prop="phone" label="联系人电话" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="bookTime" sortable="custom" label="预约日期" header-align="center" align="left">
        <template v-slot="scope">
          <span v-for="(item, index) in scope.row.showTimes" :key="index"> <span v-html="item"></span> <br /> </span>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="bookAllTimes" label="预约日期" header-align="center" align="center" width="150">
              <template v-slot="scope">
                <el-tag v-for="(item, index) in scope.row.bookAllTimes.split(',')" :key="index">
                  {{ item }}
                </el-tag>
              </template>
            </el-table-column>-->
      <!--      <el-table-column prop="bookEndTime" label="结束时间" header-align="center" align="center"></el-table-column>-->
      <!--      <el-table-column prop="name" label="样品名称" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="shootingWay" label="拍摄方式" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.shootingWay === 0" size="small" type="info">现场</el-tag>
          <el-tag v-if="scope.row.shootingWay === 1" size="small" type="info">云视频</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="way" label="取样方式" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.way === 0" size="small" type="info">取样</el-tag>
          <el-tag v-if="scope.row.way === 1" size="small" type="info">邮寄</el-tag>
          <el-tag v-if="scope.row.way === 2" size="small" type="info">自带样品</el-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="note" label="样品备注" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="recycle" label="回收" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.recycle === 0" size="small" type="info">否</el-tag>
          <el-tag v-if="scope.row.recycle === 1" size="small" type="success">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="actualAmount" label="金额/优惠券金额" header-align="center" align="center">
        <template v-slot="scope"> {{ scope.row.actualAmount }}/{{ scope.row.couponsDiscount }}</template>
      </el-table-column>
      <!--    <el-table-column prop="recycleDetail" label="回收详情" header-align="center" align="center"></el-table-column>
    <el-table-column prop="amount" label="预计费用" header-align="center" align="center"></el-table-column>
    <el-table-column prop="userId" label="预约人Id" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="userName" label="预约人" header-align="center" align="center"></el-table-column>
      <!--      <el-table-column prop="bkId" label="管理端用户Id" header-align="center" align="center"></el-table-column>-->
      <!--      <el-table-column prop="bkName" label="操作员" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="status" label="状态" header-align="center" align="center">
        <template v-slot="scope">
          <!--          <el-container v-if="scope.row.status === 0">-->
          <!--            <el-button v-if="state.hasPermission('yckj:order:update')" type="primary" link-->
          <!--                       @click="addOrUpdateHandle(scope.row.id)">确认-->
          <!--            </el-button>-->
          <!--          </el-container>-->
          <el-tag v-if="scope.row.status === 0" size="small" type="info">待取样 </el-tag
          ><!---->
          <el-tag v-if="scope.row.status === 1" size="small" type="info">进行中</el-tag>
          <el-tag v-if="scope.row.status === 2" size="small" type="info">待确认</el-tag>
          <el-tag v-if="scope.row.status === 3" size="small" type="info">待支付</el-tag>
          <el-tag v-if="scope.row.status === 4" size="small" type="success">已完结</el-tag>
          <el-tag v-if="scope.row.status === 9" size="small" type="warning">已取消</el-tag>
          <el-tag v-if="scope.row.status === 10" size="small" type="danger">已拒绝</el-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>-->
      <!--      <el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column>-->
      <el-table-column label="操作" fixed="right" header-align="center" align="left" width="240">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('yckj:order:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">
            {{ scope.row.status >= 4 ? "查看" : "审核" }}
          </el-button>
          <el-button v-if="state.hasPermission('yckj:order:amount') && scope.row.status == 2" type="primary" link @click="updateAmountHandle(scope.row.id)">确认金额 </el-button>
          <el-button v-if="state.hasPermission('yckj:order:update') && scope.row.status <= 3" type="warning" link @click="cancelOrder(scope.row.id)">取消 </el-button>
          <!--          <el-button v-if="state.hasPermission('yckj:order:update') && scope.row.status == 3" type="success" link @click="finishOrder(scope.row.id)">完结 </el-button>-->
          <el-button v-if="state.hasPermission('yckj:order:update') && scope.row.status == 3" type="success" link @click="orderFinishedHandle(scope.row.id)">完结 </el-button>
          <el-button v-if="state.hasPermission('yckj:order:tech') && 3 <= scope.row.status && scope.row.status <= 4" type="primary" link @click="updateTechHandle(scope.row.id)">确认技术员 </el-button>
          <el-button v-if="state.hasPermission('yckj:order:update') && scope.row.status == 4" type="primary" link @click="updateReportsHandle(scope.row.id)">上传报告 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: left; line-height: 66px; font-weight: 500">
      <span>总金额：{{ state.totalNum }}</span>
    </div>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList">确定</add-or-update>
    <update-amount ref="updateAmountRef" @refreshDataList="state.getDataList">确定</update-amount>
    <order-finished ref="orderFinishedRef" @refreshDataList="state.getDataList">确定</order-finished>
    <update-tech ref="updateTechRef" @refreshDataList="state.getDataList">确定</update-tech>
    <update-reports ref="updateReportsRef" @refreshDataList="state.getDataList">确定</update-reports>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./order-add-or-update.vue";
import UpdateAmount from "./order-update-amount.vue";
import OrderFinished from "./order-finished.vue";
import UpdateTech from "./order-update-tech.vue";
import UpdateReports from "./order-update-reports.vue";
import { IObject } from "@/types/interface";
import { ElMessage, ElMessageBox } from "element-plus";
import baseService from "@/service/baseService";

const view = reactive({
  deleteIsBatch: true,
  getDataListURL: "/yckj/order/page",
  getDataListIsPage: true,
  exportURL: "/yckj/order/export",
  deleteURL: "/yckj/order",
  statusList: [] as IObject[],
  dataForm: {
    id: "",
    userName: "",
    projectName: "",
    machineName: "",
    mulStatus: "",
    startTime: "",
    endTime: ""
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });
//修改样品数量
const changeStatus = (value: number) => {
  view.dataForm.mulStatus = view.statusList.join(",");
};

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

const updateAmountRef = ref();
const updateAmountHandle = (id?: number) => {
  updateAmountRef.value.init(id);
};

const orderFinishedRef = ref();
const orderFinishedHandle = (id?: number) => {
  orderFinishedRef.value.init(id);
};

const updateTechRef = ref();
const updateTechHandle = (id?: number) => {
  updateTechRef.value.init(id);
};

const updateReportsRef = ref();
const updateReportsHandle = (id?: number) => {
  updateReportsRef.value.init(id);
};
// 取消订单
const finishOrder = (id: number) => {
  ElMessageBox.confirm("确定进行[完结微信支付订单或0元订单]操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    baseService.get("/yckj/order/finish/" + id).then((res) => {
      ElMessage.success({
        message: "成功",
        duration: 500,
        onClose: () => {
          state.getDataList();
        }
      });
    });
  });
};

// 取消订单
const cancelOrder = (id: number) => {
  ElMessageBox.confirm("确定进行[取消订单]操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    baseService.get("/yckj/order/cancel/" + id).then((res) => {
      ElMessage.success({
        message: res.msg,
        duration: 500,
        onClose: () => {
          state.getDataList();
        }
      });
    });
  });
};
</script>

<style>
.order_txt {
  font-weight: bolder;
  font-size: 16px;
  color: #17b3a3;
}
</style>
